<template>
  <div class="container">
    <div class="main">
      <h1 class="title">MY TODO LIST</h1>
      <todo-inputs />
      <todo-list />
    </div>
    <div class="details">
      <notFound
        v-if="showEmpty"
        desc="暂无数据，请选择任务或添加任务"
      ></notFound>
      <todo-details v-else />
    </div>
    <userStatus />
  </div>
</template>

<script lang="ts" setup>
import todoInputs from "./components/todo-inputs.vue";
import todoList from "./components/todo-list.vue";
import notFound from "./components/not-found.vue";
import todoDetails from "./components/todo-details.vue";
import userStatus from "@/components/user-status.vue";

import { useTaskStore } from "@/store";
import { computed } from "vue";
const taskStore = useTaskStore();
const showEmpty = computed(() => !taskStore.currentTask.id);
</script>

<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    135deg,
    var(--td-brand-color-3),
    var(--td-brand-color-2),
    var(--td-brand-color-3)
  );
  padding: 24px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 12px solid var(--td-brand-color-4);
  border-radius: 4px;
  .main {
    border-right: 12px solid var(--td-brand-color-4);
    padding: 24px;
    .title {
      max-width: 600px;
      margin: 0 auto;
      padding: 24px;
      box-sizing: border-box;
      background: var(--td-brand-color-4);
      border-radius: 4px;
      box-shadow: var(--td-shadow-1);
      margin-bottom: 24px;
    }
  }
  .details {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>